<html>

<head>
    <script src="../build/react.js"></script>
    <script src="../build/react-dom.js"></script>
    <script src="../build/browser.min.js"></script>
</head>

<body>
    <div id="container"></div>
    <div id="container2"></div>
    <div id="container3"></div>
    <script type="text/babel">

            var TitleBar = React.createClass({

                //用来设置属性的类型，必要性
                propTypes:{
                    title:React.PropTypes.string.isRequired,
                },

                render:function () {
                    return <div>{this.props.title}</div>
                }
            });

            var title = '首页';

            ReactDOM.render(
                <TitleBar title={title}/>,
                document.getElementById('container')
            );

            var NoteList = React.createClass({
                render:function () {
                    return (
                        <ol>
                            {
                                React.Children.map(this.props.children,function (child) {
                                    return <li>{child}</li>
                                })
                            }    
                        </ol>
                    );
                }
            });

            ReactDOM.render(
                <NoteList>
                    <span>hellow</span>
                    <span>world</span>
                    </NoteList>
                ,
                document.getElementById('container2')
            )
            //获取真实DOM节点
            var MyComponent = React.createClass({
                handleClick :function () {
                    this.refs.myInputText.focus();
                },
                handleFocus :function () {
                    alert('输入框获取焦点');
                    this.refs.myInputText.blur();
                },
                render:function (){
                    return (
                        <div>
                            <input type='text' onFocus={this.handleFocus} ref="myInputText"/>
                            <input type='button' value='Focus the text input' onClick={this.handleClick}/>
                            </div>
                    );
                }
               
            });
           
            ReactDOM.render(
               <MyComponent/>
                ,
                document.getElementById('container3')
            )

        </script>
</body>

</html>